<template>
	<u--textarea
		class="textarea"
		:placeholder="props.placeholder"
		:height="props.height"
		:maxlength="props.maxlength"
		:count="props.count"
		:style="{ height: props.height }"
		:focus="props.focus"
	/>
</template>

<script lang="ts" setup>

	const props = defineProps({
		placeholder: {
			type: String,
			default: '',
		},
		height: {
			type: [String, Number],
			default: '180rpx',
		},
		maxlength: {
			type: [Number],
			default: 500,
		},
		count: {
			type: Boolean,
			default: false,
		},
		focus: {
			type: Boolean,
			default: false,
		},
	});
</script>

<style lang="scss" scoped>
	.textarea {
		width: 642rpx;
		height: 180rpx;
		background: #F4F5F8;
		border-radius: 16rpx;
		border: 0 !important;
		box-sizing: border-box;
		padding: 24rpx;
		margin-bottom: 12rpx;
		::v-deep .u-textarea__count {
			background-color: #F4F5F8 !important;
			padding: 12rpx 18rpx;
		}
		::v-deep textarea {
			font-size: 24rpx;
			font-weight: 400;
			color: #707070;
		}
	}
</style>